import React from "react";
import '../../css/yyt/xiaoxi.css'
import { SearchOutline,MessageOutline } from 'antd-mobile-icons'
import { useNavigate,Outlet } from "react-router-dom";
import { useEffect,useState } from "react";
const Xiaoxi = () => {
  const navigate = useNavigate();
  const [xiaoxi,setXiaoxi] = useState('聊天')
  useEffect(()=>{
    navigate('/tar/xiaoxi/liao')
  },[])
  return (
    <div>
      <div className="xiaoxi-box-top">
        <div className="xiaoxi-top-left"><img src="/xiaoxi.png" alt="" className='xiaoxi-top-left-img'/> <h4 className="h4">消息</h4></div>
        <div> <SearchOutline className="h4" onClick={()=>{navigate('/search')}}/>  <MessageOutline className="h4" onClick={()=>{navigate('/lmsg')}}/> </div>
      </div>
      <div>
        <div className="xiaoxi-title-top">
            <div className="xiaoxi-title-top-p" onClick={()=>{setXiaoxi('聊天'),navigate('/tar/xiaoxi/liao')}} style={{color:xiaoxi=='聊天'?'#7210FF':'',borderBottom:xiaoxi=='聊天'?'12px solid #7210FF':''}}>聊天</div>
            <div className="xiaoxi-title-top-p" onClick={()=>{setXiaoxi('电话'),navigate('/tar/xiaoxi/dian')}} style={{color:xiaoxi=='电话'?'#7210FF':'',borderBottom:xiaoxi=='电话'?'12px solid #7210FF':''}}>电话</div>
        </div>
        <div className="xiaoxi-title-bottom"> 
            <Outlet></Outlet>
        </div>
      </div>
    </div>
  );
};

export default Xiaoxi;